<template>
  <div class='container'>
    <ul class="list">
      <li v-for="(item, index) in list"
          :key="index"
          :class="['li-'+item.class]">{{item.id}}</li>
    </ul>
    <el-button @click="randomArr">
      test
    </el-button>
    <el-button class="reset"
               @click="reset">reset</el-button>
  </div>
</template>
<script>
export default {
  data () {
    return {
      list: [
        { id: 1, name: '1', class: '1-1' },
        { id: 2, name: '2', class: '1-2' },
        { id: 3, name: '3', class: '1-3' },
        { id: 4, name: '4', class: '1-4' },
        { id: 5, name: '5', class: '2-1' },
        { id: 6, name: '6', class: '2-2' },
        { id: 7, name: '7', class: '2-3' },
        { id: 8, name: '8', class: '2-4' },
        { id: 9, name: '9', class: '3-1' },
        { id: 10, name: '10', class: '3-2' },
        { id: 11, name: '11', class: '3-3' },
        { id: 12, name: '12', class: '3-4' },
        { id: 13, name: '13', class: '4-1' },
        { id: 14, name: '14', class: '4-2' },
        { id: 15, name: '15', class: '4-3' },
        { id: 16, name: '16', class: '4-4' }
      ],
      resetList: [
        { id: 1, name: '1', class: '1-1' },
        { id: 2, name: '2', class: '1-2' },
        { id: 3, name: '3', class: '1-3' },
        { id: 4, name: '4', class: '1-4' },
        { id: 5, name: '5', class: '2-1' },
        { id: 6, name: '6', class: '2-2' },
        { id: 7, name: '7', class: '2-3' },
        { id: 8, name: '8', class: '2-4' },
        { id: 9, name: '9', class: '3-1' },
        { id: 10, name: '10', class: '3-2' },
        { id: 11, name: '11', class: '3-3' },
        { id: 12, name: '12', class: '3-4' },
        { id: 13, name: '13', class: '4-1' },
        { id: 14, name: '14', class: '4-2' },
        { id: 15, name: '15', class: '4-3' },
        { id: 16, name: '16', class: '4-4' }
      ]
    }
  },
  methods: {
    randomArr () {
      let arr = JSON.parse(JSON.stringify(this.list))
      // arr[0].class = '3-3'
      // arr[10].class = '1-1'
      let randomIndex = this.getRandomIndex(6)
      let randomClass = this.getRandomClass(randomIndex)
      let newClassArr = this.randomClassArr(randomClass)
      console.log(randomIndex, randomClass, newClassArr)
      randomIndex.map((item, index) => {
        arr[item].class = newClassArr[index]
      })
      this.list = arr
    },
    // 获取若干个0-16内的随机数
    getRandomIndex (len) {
      let arr = []
      for (let i = 0; i < len; i++) {
        let index = Math.floor(Math.random() * 16)
        arr.push(index)
      }
      arr = Array.from(new Set(arr))
      return arr
    },
    // 获取随机数对应的item的class
    getRandomClass (indexArr) {
      let classArr = []
      indexArr.map((item) => {
        let className = this.list[item].class
        classArr.push(className)
      })
      return classArr
    },
    // 打乱class数组
    randomClassArr (classArr) {
      let newArr = []
      let originArr = JSON.parse(JSON.stringify(classArr))
      classArr.map((item) => {
        let index = Math.floor(Math.random() * originArr.length)
        newArr = newArr.concat(originArr.splice(index, 1))
      })
      return newArr
    },
    reset () {
      let arr = this.resetList
      this.list = arr
    }
  },
  created () {
  },
  mounted () {
  }
}
</script>
<style scoped lang='scss'>
.container {
  width: 500px;
  height: 500px;
  border: 1px solid #000;
  position: relative;

  button {
    position: absolute;
    left: 0;
    bottom: 0;

    &.reset {
      left: 100px;
    }
  }

  .list {
    position: relative;

    li {
      width: 100px;
      height: 100px;
      border: 1px solid #000;
      color: #000;
      line-height: 100px;
      text-align: center;
      position: absolute;
      transition: all ease 2s;
    }

    .li-1-1 {
      top: 0;
      left: 0;
    }

    .li-1-2 {
      top: 0;
      left: 100px;
    }

    .li-1-3 {
      top: 0;
      left: 200px;
    }

    .li-1-4 {
      top: 0;
      left: 300px;
    }

    .li-2-1 {
      top: 100px;
      left: 0;
    }

    .li-2-2 {
      top: 100px;
      left: 100px;
    }

    .li-2-3 {
      top: 100px;
      left: 200px;
    }

    .li-2-4 {
      top: 100px;
      left: 300px;
    }

    .li-3-1 {
      top: 200px;
      left: 0;
    }

    .li-3-2 {
      top: 200px;
      left: 100px;
    }

    .li-3-3 {
      top: 200px;
      left: 200px;
    }

    .li-3-4 {
      top: 200px;
      left: 300px;
    }

    .li-4-1 {
      top: 300px;
      left: 0;
    }

    .li-4-2 {
      top: 300px;
      left: 100px;
    }

    .li-4-3 {
      top: 300px;
      left: 200px;
    }

    .li-4-4 {
      top: 300px;
      left: 300px;
    }
  }
}
</style>
